/*绠€鍗曟竻闄ら粯璁ゆ牱寮�*/
*{
    margin: 0 auto ;

    padding: 0;
}

/*鍔ㄧ敾鍏抽敭甯э紝缈绘粴鍚э紒鐗涘疂瀹�*/
@keyframes move{
    0%{
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;
    }
    100%{
        transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);
    }
}

html{
    /*background:linear-gradient(#29f9f0 0%, #000 80%);*/
    height:100%;
}

div.wrap{
    margin-top: 200px;    /*涓婂杈硅窛璁剧疆*/
    width: 200px;         /*缁欎粬涓€涓搴�*/
    perspective: 1000px;  /*鏅繁璁剧疆锛岃鍥捐窛鍏冪礌鐨勮窛绂�  鐩稿綋浜庢憚鍍忔満*/
}

.wrap>div.cube{
    width: 200px;                                               /*box璁剧疆瀹藉害200鍍忕礌*/
    height: 200px;                                              /*璁剧疆楂樺害200鍍忕礌*/
    position: relative;                                         /*寮€鍚浉瀵瑰畾浣嶏紝濂借閲岄潰鐨勫厓绱犲紑鍚畾浣嶆椂涓嶄細楂樺害濉岄櫡*/
    color: #ff92ff;                                             /*瀛椾綋鐨勯鑹�*/
    font-size: 36px;                                            /*瀛椾綋澶у皬*/
    font-weight: 100;                                           /*瀛椾綋缁嗗皬*/
    text-align: center;                                         /*鏂囨湰瀛椾綋宸﹀彸灞呬腑*/
    line-height: 200px;                                         /*琛岄珮璁剧疆锛岃繖鏍锋枃鏈氨鍦ㄦ瘮box涓槸涓婁笅灞呬腑*/
    transform-style: preserve-3d ;                              /*寮€鍚繖涓紝琛ㄧず鎵€鏈夊厓绱犲湪3D骞抽潰鍛堢幇*/
    transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);   /*涓€寮€濮嬬殑瑙掑害锛岃瑙変笂鐪嬩竴涓�*/
    animation: move 8s infinite linear;                         /*鍚姩鍔ㄧ敾鐨勫悕瀛椼€佹椂闀裤€佹棤闄愬惊鐜€佸寑閫熸挱鏀�*/
}

/*澶х殑姝ｆ柟浣撶殑璁剧疆*/
.cube>div{
    width: 100%;                              /*璁剧疆鐨勫搴﹀拰鐖剁骇涓€鏍�*/
    height: 100%;                             /*璁剧疆鐨勯珮搴︿竴鏍�*/
    border: 10px solid #66daff;               /*杈规璁剧疆*/
    border-radius: 20px;                      /*璁剧疆涓€涓嬪渾瑙�*/
    position: absolute;                       /*寮€鍚粷瀵瑰畾浣嶏紝杩欐牱灏卞叏閮ㄥ彔鍦ㄤ竴璧蜂簡*/
    background-color: rgba(51,51,51,.3);      /*鏉ヤ釜鑳屾櫙鑹诧紝30%鐨勯€忔槑搴�*/
    transition:transform 0.3s ease-in;        /*杩囧害鍙樺舰鐨勬椂闂磋缃拰蹇參璁剧疆*/
}

/*璁剧疆澶х殑姝ｆ柟浣撶殑鍏釜闈㈢殑浣嶇疆*/
.cube div.out-front{
    transform: translateZ(100px);                   /*璁剧疆鍓嶉潰鐨勯偅涓€闈㈢殑Z杞村線鍓嶇Щ*/
}
.cube div.out-back{
    transform: translateZ(-100px) rotateY(180deg);  /*璁剧疆鍚庨潰鐨勯偅涓€闈㈢殑Z杞村線鍚庣Щ锛孻杞磋浆涓€涓嬨€備娇寰楃殑鑳岄潰鐨勯偅涓€闈㈡槸闈㈠悜鑳岄潰鐨�*/
}
.cube div.out-left{
    transform: translateX(-100px) rotateY(-90deg);  /*璁剧疆宸﹁竟鐨勯偅涓€闈㈠湪X杞翠笂閫€涓€浜涳紝鍚戝乏杞�*/
}
.cube div.out-right{
    transform: translateX(100px) rotateY(90deg);    /*璁剧疆鍙宠竟鐨勯偅涓€闈㈠湪X杞翠笂杩涗竴浜涳紝鍚戝彸杞�*/
}
.cube div.out-top{
    transform: translateY(-100px) rotateX(90deg);   /*璁剧疆涓婅竟鐨勯偅涓€闈㈠湪Y杞翠笂鍘讳竴浜涳紝鍚戝悗缈昏浆*/
}
.cube div.out-bottom{
    transform: translateY(100px) rotateX(-90deg);   /*璁剧疆涓嬭竟鐨勯偅涓€闈㈠湪X杞翠笅鍘讳竴浜涳紝鍚戝墠缈�*/
}

/*灏忕殑姝ｆ柟浣撶殑璁剧疆*/
.cube>span{
    display: block;                      /*鍏堣浆鍙樹负鍧楃骇鍏冪礌*/
    width: 90px;                         /*璁剧疆瀹藉害锛屽洜涓烘槸灏忕殑姝ｆ柟浣�*/
    height: 90px;                        /*璁剧疆楂樺害*/
    background-color: #ffe7f9;           /*鑳屾櫙鑹�*/
    position:absolute;                   /*寮€鍚粷瀵瑰畾浣�*/
    top:50px;                            /*鍥犱负楂樺害鏄�100锛屾槸鍘熸潵鐨勪竴鍗娿€傝灞呬腑灏变笂涓嬮兘涓€鏍风殑50*/
    left:50px;                           /*鍚岀悊锛屽洜涓哄搴︽槸100锛屾槸鍘熸潵鐨勪竴鍗娿€傝灞呬腑灏卞乏鍙抽兘涓€鏍风殑50*/
    border: 5px solid #424242;           /*杈规璁剧疆*/
    opacity: 0.9;                        /*閫忔槑搴﹁缃垚90%*/
    /*backface-visibility: hidden;*/     /*璁剧疆浜嗛€忔槑搴﹀彲浠ヨ缃殣钘忚儗闈�*/
    border-radius: 30%;                  /*鍦嗚*/
}

.cube span.in-front{
    transform: translateZ(50px);                        /*璁剧疆鍓嶉潰鐨勯偅涓€闈㈢殑Z杞村線鍓嶇Щ*/
}
.cube span.in-back{
    transform: translateZ(-50px) rotateY(180deg);       /*璁剧疆鍚庨潰鐨勯偅涓€闈㈢殑Z杞村線鍚庣Щ锛孻杞磋浆涓€涓嬨€備娇寰楃殑鑳岄潰鐨勯偅涓€闈㈡槸闈㈠悜鑳岄潰鐨�*/
}
.cube span.in-left{
    transform: translateX(-50px) rotateY(-90deg);       /*璁剧疆宸﹁竟鐨勯偅涓€闈㈠湪X杞翠笂閫€涓€浜涳紝鍚戝乏杞�*/
}
.cube span.in-right{
    transform: translateX(50px) rotateY(90deg);         /*璁剧疆鍙宠竟鐨勯偅涓€闈㈠湪X杞翠笂杩涗竴浜涳紝鍚戝彸杞�*/
}
.cube span.in-top{
    transform: translateY(-50px) rotateX(90deg);        /*璁剧疆涓婅竟鐨勯偅涓€闈㈠湪Y杞翠笂鍘讳竴浜涳紝鍚戝悗缈昏浆*/
}
.cube span.in-bottom{
    transform: translateY(50px) rotateX(-90deg);        /*璁剧疆涓嬭竟鐨勯偅涓€闈㈠湪X杞翠笅鍘讳竴浜涳紝鍚戝墠缈�*/
}

/*褰撻紶鏍囨粦杩囪繖涓猟iv鐨勬椂鍊欍€傝繃娓″彉鍖栦笅闈㈢殑浜嬩欢*/
.wrap:hover .cube div.out-front{
    transform: translateZ(200px);                   /*褰撻紶鏍囨粦杩囷紝鍓嶉潰灏卞線鍓嶅嚫*/
}
.wrap:hover .cube div.out-back{
    transform: translateZ(-200px) rotateY(180deg);  /*褰撻紶鏍囨粦杩囷紝鍓嶉潰灏卞線鍚庤窇锛屽姞浜嗘棆杞槸鍥犱负涓€寮€濮嬫槸骞抽潰鐨勶紝涓嶅姞浼氬彉浼氬師鏍�*/
}
.wrap:hover .cube div.out-left{
    transform: translateX(-200px) rotateY(-90deg);  /*褰撻紶鏍囨粦杩囷紝宸﹂潰灏卞線宸﹂*/
}
.wrap:hover .cube div.out-right{
    transform: translateX(200px) rotateY(90deg);    /*褰撻紶鏍囨粦杩囷紝鍙抽潰灏卞線鍙宠繘*/
}
.wrap:hover .cube div.out-top{
    transform: translateY(-200px) rotateX(90deg);   /*褰撻紶鏍囨粦杩囷紝涓婇潰灏卞線涓婂啋*/
}
.wrap:hover .cube div.out-bottom{
    transform: translateY(200px) rotateX(-90deg);   /*褰撻紶鏍囨粦杩囷紝涓嬮潰灏卞線涓嬪脊*/
}


span.points {
    display: flex;
    width: 20px;
    height: 20px;
    margin: 5px;
    border-radius: 50%;
    background-color: #bb9aff;
}

span.in-front{
    display: flex;
    justify-content: center;
    align-items: center;
}
.in-front>span{
    width: 40px;
    height: 40px;
}


span.in-left{
    display: flex;
    justify-content: center;
}
span.in-left>.pitL2{
    align-self: flex-end;
}
.in-left>span,.in-right>span{
    width: 25px;
    height: 25px;
    margin: 10px;
}


span.in-back{
    display: flex;
}
span.in-back>.pitB2{
    align-self: center;
}
span.in-back>.pitB3{
    align-self: flex-end;
}

span.in-right{
    display: flex;
    flex-wrap: wrap;
}


span.in-top{
    display: flex;
}
span.in-top>.pitT1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
span.in-top>.pitT2{
    display: flex;
    align-items: center;
}
span.in-top>.pitT3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

span.in-bottom{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
}